<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			function myClick(idStr,fun)
			{
				var btn=document.getElementById(idStr);
				btn.onclick=fun;
			}
			window.onload=function()
			{
				//查找#bj节点
				var btn01=document.getElementById("btn01");
				btn01.onclick=function()
				{
					var bj=document.getElementById("bj");
					//innerHTML通过这个属性可以获取元素内部的html代码
					alert(bj.innerHTML);
				}
				
				//查找所有li节点
				var btn02=document.getElementById("btn02");
				btn02.onclick=function()
				{
					var lis=document.getElementsByTagName("li"); //通过标签名获取一组元素节点,返回了一个类数组对象
					for(var i=0;i<lis.length;i++)
					{
						alert(lis[i].innerHTML);
					}
				}
				
				//查找name=gender的所有节点
				var btn03=document.getElementById("btn03");   //通过name属性获取一组元素节点对象
				btn03.onclick=function()
				{
					var inputs=document.getElementsByName("gender");  
					for(var i=0;i<inputs.length;i++)
					{
						//alert(inputs[i].innerHTML);   //获取内部的，对于自结束标签！，没有意义
						alert(inputs[i].value);   /* .属性去获取但是class不能采用这种方式因为class是关键字应该用className */
						alert(inputs[i].className);
					}
				}           //函数的最后到底要不要加;呢
				
				//查找#city下的所有li节点
				var btn04=document.getElementById("btn04");
				btn04.onclick=function()
				{
					var city=document.getElementById("city");
					var lis=city.getElementsByTagName("li");
					for(var i=0;i<lis.length;i++)
					{
						alert(lis[i].innerHTML);
					}
				}
				
				
				//查找#city下的所有子节点
				var btn05=document.getElementById("btn05");
				btn05.onclick=function()
				{
					var city=document.getElementById("city");
					 /* var cns=city.childNodes;//childNodes属性会获取包括文本节点在内的所有节点,空白也算，当成文本了
					 for(var i=0;i<cns.length;i++)
					 {
						 alert(cns[i].innerHTML);
					 } */
					 var cns=city.children;   //只包括子元素，所有浏览器的结果都是一样的
					 for(var i=0;i<cns.length;i++)
					 {
						 alert(cns[i].innerHTML);             
					 }
				}
				
				
				//返回#phone的第一个子节点(节点不包括空白的文本)
				var btn06=document.getElementById("btn06");
				btn06.onclick=function()
				{
					var phone=document.getElementById("phone"); 
					 var zjd=phone.firstChild;  
					 //var zjd=phone.firstElementChild;(获取第一个子元素,包括空白)
					alert(zjd.innerHTML);
				}
				
				
				//查找#bj的父节点//innerText可以获取到该属性内部的文本内容，会自动将html标签去除
				var btn07=document.getElementById("btn07");
				btn07.onclick=function()
				{
					alert("gg");
					var bj=document.getElementById("bj");
					var ul=bj.parentNode;
					alert(ul.innerHTML);
				}
				
				//查找#andriod的前一个兄弟节点
				myClick("btn08",function()
				{
					var android=document.getElementById("andriod");
					var ios=android.previousSibling;
					alert(ios.innerHTML);  //节点就包括空白，空白是undefined
					alert(ios.previousElementSibling.innerHTML);   //获取前一个元素节点，不包括空白ie8及以下不支持
				})
				
				
				//返回#username的value属性值
				myClick("btn09",function(){
					var um=document.getElementById("username");
					alert(um.value);
				})
				
				
				//设置#username的value属性值
				myClick("btn10",function()
				{
					var z=document.getElementById("username");
					z.value="什么情况";
					
				})
			
				//查找#bj的文本值
				//节点的3个属性nodeName、nodeType、nodeValue
				myClick("btn11",function()
				{
					var bj=document.getElementById("bj");  //元素节点
					//alert(bj.innerText);
					var fc=bj.firstChild;   //这已经是个文本节点了，不能再innerHTML  确实是这样其他的是ul的第一个节点是北京liinnerHTML
					alert(fc.nodeValue);
					alert(fc.nodeName);
					alert(fc.nodeType);
				})
				
				var body=document.body;  //获取body
				var html=document.documentElement;//获取html
				var all=document.all; 
				for(var i=0;i<all.length;i++)
				{
					console.log(all[i]);
				}
				all=document.getElementsByTagName("*");  //是一样的
				//根据元素class属性值查询一组元素点对象
				var box1=document.getElementsByClassName("box1");   //ie8不支持
				
				
				
			}
		</script>
		<style>
			#i1{
				border: 0px solid salmon;
				width: 700px;
				height: 500px;
				margin: 0 auto;
			}
			#div1
			{
				border: 1px solid aqua;
				width: 350px;
				height: 350px;
			}
			#div2
			{
				border: 1px solid aqua;
				width: 350px;
				height: 100px;
				margin-top: 30px;	
			}
			#p1
			{
				font-size: 22px;
				margin: 0 20px;
			}
			p{
				font-size:22px ;
				margin: 30px 20px;
			}
			li{
				  list-style: none;
				  float: left;
				  font-size: 22px;
				  margin: 0 10px;
				 border: 1px solid aqua;
				 background-color: aqua;
			}
			input[type=button]
			{
				width: 300px;
				height: 27px;
				display: block;
				margin-top: 11px;
				
			}
			#inp
			{
				margin-top: 35px;
			}
			#div3
			{
				width: 300px;
				height: 480px;
			}
			.c1
			{
				float: left;   /* 浮动的话得几个块去进行浮动 */
				margin-left: 20px;
			}
			</style>
	</head>
	<body>
		<div id="i1">
		<div class="c1">
		<div id="div1">
			<p id="p1">你喜欢哪个城市</p>
			<ul id="city">
				<li id="bj">北京</li>
				<li>上海</li>
				<li>东京</li>
				<li>首尔</li>
			</ul>
		
		<br />
		
			<p class="p">你喜欢哪款单机游戏</p>
			<ul>
				<li>红警</li>
				<li>实况</li>
				<li>极品飞车</li>
				<li>魔兽</li>
			</ul>
		
		<br />
		
			<p class="p">你手机的操作系统是</p>
			<ul id="phone"><li>ios</li>
			<li id="andriod">android</li>
				<li>windows</li>
				
			</ul>
		</div>
		
		<div id="div2">
			<span>gender:</span><input type="radio" name="gender" value="male"/>Male <input value="female" type="radio" name="gender" checked/> Female
		     <br /><br />                    <!-- value是它属性 -->
			 <span>name:</span><input type="text" id="username" value="abcde"/>   <!-- //value就是文本框里的内容 -->
		</div>
		</div>
		<div id="div3" class="c1">
			<input id="btn10" type="button" value="设置#username的value属性值"/>  <!-- value就是显示出来的 -->
			<input id="btn01" type="button" value="查找#bj节点"/>
			<input id="btn02" type="button" value="查找所有li节点"/>
			<input id="btn03" type="button" value="查找name=gender的所有节点"/>
			<input id="btn04" type="button" value="查找#city下的所有li节点"/>
			<input id="btn05" type="button" value="返回#city的所有子节点"/>
			<input id="btn06" type="button" value="返回#phone的第一个子节点"/>
			<input id="btn07" type="button" value="查找#bj的父节点"/>
			<input id="btn08" type="button" value="查找#andriod的前一个兄弟节点"/>
			<input id="btn09" type="button" value="返回#username的value属性值"/>
			<input id="btn11" type="button" value="查找#bj的文本值"/>
		</div>
		</div>
	</body>
</html>